<template>
  <v-container>
    <v-row>
      <v-col id="main" cols="8" class="mx-auto mt-5 pa-0 white">
        <v-img
          alt="TreeHole Logo"
          class="shrink"
          src="/upload/assets/background.png"
          transition="scale-transition"
          height="200"
        />

        <div id="top" class="d-flex justify-space-between">
          <v-avatar
            color="white"
            size="100"
          >
            <img
              :src="user.avatar"
              alt="用户头像"
              @click="update_image()"
            >
          </v-avatar>
          
          <div>
            <p class="font-weight-black mb-1">
              {{user.name}} 
              <v-icon small color="blue" v-show="!user.gender">mdi-gender-male</v-icon>
              <v-icon small color="pink" v-show="user.gender">mdi-gender-female</v-icon>
            </p>

            <p class="text-caption grey--text">
              动态 <span class="black--text mr-3">{{user.feedCount}}</span>
              粉丝 <span class="black--text mr-3">{{user.fansCount}}</span> 
              关注 <span class="black--text">{{user.followsCount}}</span>
            </p>
          </div>

          <v-btn v-show="!user.isFollow" class="me-5" color="blue-grey lighten-5" depressed @click="toFollow()">
            <v-icon dark>mdi-plus</v-icon>
            <span class="font-weight-black" >关注</span>
          </v-btn>

          <v-btn v-show="user.isFollow" class="me-5" color="blue-grey lighten-1" depressed @click="toFollow()">
            <span class="font-weight-black white--text" >取消关注</span>
          </v-btn>
        </div>

        <p class="text-caption grey--text px-2">
          <v-icon small left right>mdi-message-text-outline</v-icon>
          {{user.introduction}}
        </p>

        <v-tabs class="px-2">
          <v-tab :to="{path:'/u/feed', query: {id:user.userId}}">动态</v-tab>
          <v-tab :to="{path:'/u/fans', query: {id:user.userId}}">粉丝</v-tab>
          <v-tab :to="{path:'/u/follows', query: {id:user.userId}}">关注</v-tab>
        </v-tabs>
        
        <router-view></router-view>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
export default {
  name: 'MyUser',
  data: ()=>({
    user: {}
  }),
  beforeRouteEnter (to, from, next) {
    next(vm => {
      const id = to.query.id;
      // 根据路由id，查询并设置用户页的信息
      vm.queryUserIndex(id)
    })
  },
  methods:{
    doQueryUserIndex(url, config){
      this.$utils.doGetAxios(this, url, config, (data)=>{
        this.user = data
      })
    },
    queryUserIndex(id){
      const userId = this.$store.state.user.userId
      const token = this.$store.state.user.token

      if(token && userId){
        this.doQueryUserIndex('/api/user/u/' + id, {
          params:{userId},
          headers: {token }
        })
      }else{
        this.doQueryUserIndex('/api/user/' + id, )
      }
    },
    toFollow(){
      this.$utils.toFollow(this, this.user.userId, this.user.isFollow, ()=>{
        this.queryUserIndex(this.user.userId)
      })
    }
  }
}
</script>

<style scoped>
#top{
  position: relative;
  padding-top: 20px;
  padding-left: 150px;
}
#top > .v-avatar{
  position: absolute;
  top: -35px;
  left: 20px;
}
#top > div{
  width: 300px;
}

</style>